// An entry point indicates which module webpack should use to begin building out its internal dependency graph.
// require 类似于import，变量需要同包中变量同名
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // development 自动使用sourcemap
  mode: "development", //"production" | "development" | "none"
  optimization:{
    splitChunks:{
      chunks:"all"
    }
  },
  // when you would like to inject multiple dependent files together and graph their dependencies int one chunk.
  // single entry syntax is a great choice when you are looking to quickly set up a webpack configuration for an application or tool with one entry point.
  entry: ["./src/index.js"],
  // tells webpack where to emit the bundles it creates and how to name these files.
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].lxs.js", // [name].lxs.js for dev environment.
  },
  module: {
    // webpack only understands javascript and JSON files.
    // Loaders allow webpack to process other types of files and convert them into valid modules.
    // At a high level, loaders have two properties in webpack configuration.
    // test property identifies which files should be transformed.
    // use property indicates which loader should be used to do the transforming.
    // Loaders are evaluated/executed from right to left(or from bottom to top).
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, "src")],
        exclude: [path.resolve(__dirname, "node_modules")],
        // issuer: /\.css$/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader,"css-loader"],
      },
    ],
  },
  // in order to use a plugin, you need to require() it and add it to the plugins array.
  plugins: [
    new HtmlWebpackPlugin({ template: "./index.html" }),
    new MiniCssExtractPlugin({
      filename:"styles.css"
    })
  ],

  devtool: "eval", // how source map are generated
  target: "web",
  devServer: {
    hot:true,
    open:["/index.html"],
    static:{
      directory:path.join(__dirname,"dist")
    },
  },

  // this means that after the initial build, webpack will continue to watch for changes in any of the resolved files.
  // In webpack-dev-server and webpack-dev-middleware watch mode is enabled by default.
  // watch:true,
  // watchOptions:{
  //   aggregateTimeout:200, // add a delay before rebuilding once the first file changed.
  //   ignored:[/node_modules/],// exclude folder
  // }
};
